<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>primevue-designer-preview</title>
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/api/api.min.js"
            integrity="sha512-GVBPPZhMn+tJzjZo+FOLmiv/PuCl2ghA98Y24uKPcm+DiruUpnscuP1InvTiA5SwP35cbl9vCRHpjN22WNIs8A=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/config/config.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/utils/utils.min.js"
            integrity="sha512-1JXLiu+2pOxWclIJAjcN7M8GXJIHX15Dm/ixfZgJcFfH+Z64y9C4v4RqxP0KFdF6y6S4nIZkqkUSeMehFeBang=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/usestyle/usestyle.min.js"
            integrity="sha512-un84kGl+g5kzvulxeUh4eQ//0mqSvcOSuCJF5puLlj8BjaHUzgS7D1WgKkoBYWci7sqxDDY9nnlMF3/OJQ7YHw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/base/base.min.js"
            integrity="sha512-rD3a6GSH0wcIfZRqvCrxMT8IhQY75wG13ABgJuVO+mXeEMuJ6xx0qceRVEW5cBTb6d1DtgCQtur6XI1djbZnsg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/basecomponent/basecomponent.min.js"
            integrity="sha512-2q15pmb+39ER3oaAcrRTRLfD0T2sdBxTPW+gorqNI2XqDGlprFAPOnAMnIxvrMpAQk0do8O2eGWYVr05N7XOHw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/basedirective/basedirective.min.js"
            integrity="sha512-o6EiqkJ5QpS+riUKb+5v96Ig8Ui9pCCHC8n7CAmQVaJ7LGno7t7kTvsrKxjgBQ8u5TU3SxYK9i16TH1d2cP2/Q=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/baseicon/baseicon.min.js"
            integrity="sha512-Hm263dKzI8sZKaDP8X00rFCgGfqolsLis7Rp2bnn6haJvvETIAK6WYwnMTw4mmHCbeZRsV6WqBbitTR7HN8OPw=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/styleclass/styleclass.min.js"
            integrity="sha512-9GgXCKnZ8S1nqdku4ojhY1CP/v9zF3BljGqwVDyCXwjXtfBdttxn/kmVqZgkV7N1xLADxoUP0wV2VY08ciNOjQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/primevue/3.46.0/button/button.min.js"
            integrity="sha512-r0dIqXA+7n4A+5hlp4PwgKEioz4JJbP38hSQC0cWXBNndIiJsypxqmpGEOSSTbCHk6em/eyIgJ2maXC9tUxr/A=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
        body {
            margin: 0;
            overflow-x: hidden;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            height: calc(100vh - 33px);
            padding: 12px;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
        }

        input, textarea {
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
        }
    </style>
</head>
<body>
<noscript>
    <strong>抱歉，javascript被禁用，请开启后重试。</strong>
</noscript>
<div id="app">
</div>
<script>

    window.addEventListener('message', init, false);

    function init(event) {
        if (event.data.type === 'refreshFrame') {
            const {data} = event.data;
            const attrs = {}
            newVue(attrs, data.js, data.html)

        }
    }

    function newVue(attrs, js, html) {
        console.info(js)
        const vnode = eval(`(${js})`)
        vnode.template = html;
        console.info(Button)
        const app = Vue.createApp(vnode);
        app.use(primevue)


        app.mount("#app");
    }


</script>
</body>
</html>